<template>
  <div>
    <Row :gutter="25">
      <i-col span="6" v-for="(item, index) in product_list" :key="index" style="min-width: 300px">
        <Card class="card">
          <Badge class="badge" @click.native="testAll()">
            <Icon type="ios-close-circle" slot="count" color="#ed4014" size="25" />
          </Badge>
          <Row>
            <i-col span="6" offset="2">
              <Avatar style="background-color: #101010" icon="md-paper-plane" size="large"/>
            </i-col>
            <i-col span="14">
              <Row>
                <span style="font-weight: bolder">{{ item.speaker_name }}</span>
              </Row>
              <Row style="margin-top: 10px">
                <Col>
                  <Tag :color="item.rom_version === 0 ? 'blue' : 'primary'">{{ item.rom_version === 0 ? '老架构' : '新架构' }}</Tag>
                  <Tag :color="item.system_version === 0 ? 'blue' : 'primary'">{{ checkSystemVersion(item.system_version) }}</Tag>
                </Col>
              </Row>
              <Row>
                <div style="margin: 10px 0 10px 0">
                  <p>全部用例数: {{ item.case_count }}  个</p>
                  <p>巡检任务数: {{ item.task_count }}  次</p>
                </div>
              </Row>
            </i-col>
          </Row>
          <Divider style="margin: 13px auto"/>
          <Row type="flex" justify="center" align="middle">
            <Button to="/taskList" type="info">任务列表</Button>
            <Divider type="vertical" style="height: 40px"/>
            <Button type="success" @click="onClickParams(item.params)">参数编辑</Button>
          </Row>
        </Card>
      </i-col>
      <i-col span="6">
        <Card class="add_card card" @click.native="onClickAddProduct">
          <span class="add_title">
            <Icon type="md-add" />
            新增产品
          </span>
        </Card>
      </i-col>
    </Row>
    <Modal
        v-model="paramsModal"
        title="配置接口参数，请谨慎操作！"
        footer-hide>
      <Form ref="params" :model="params" :label-width="100" :rules="ruleValidate">
        <FormItem label="反控URL" prop="url">
          <Input v-model="params.url" placeholder="请填写反控URL"></Input>
        </FormItem>
        <FormItem label="product_secret" prop="product_secret">
          <Input v-model="params.product_secret" placeholder="请填写product_secret"></Input>
        </FormItem>
        <FormItem label="productId" prop="productId">
          <Input v-model="params.productId" placeholder="请填写productId"></Input>
        </FormItem>
        <FormItem label="osClientId" prop="osClientId">
          <Input v-model="params.osClientId" placeholder="请填写osClientId"></Input>
        </FormItem>
        <Row>
          <Col flex="200px">
            <span style="color: orangered;margin-left: 20px">如需配置，请联系管理员！</span>
          </Col>
          <Col flex="auto"></Col>
          <Col flex="60px">
            <Button type="primary" @click="updateParams()">提交</Button>
          </Col>
        </Row>
      </Form>
    </Modal>
    <Modal
        v-model="addModal"
        title="添加新的音箱"
        footer-hide>
      <Form ref="formDynamic" :model="formDynamic" :label-width="100" :rules="ruleValidate">
        <FormItem label="产品名称" prop="name">
          <Input v-model="formDynamic.name" placeholder="请填写产品名称"></Input>
        </FormItem>
        <FormItem label="硬件版本" prop="system_version">
          <Select v-model="formDynamic.system_version" placeholder="请选择音箱的底层版本">
            <Option value=0>linux</Option>
            <Option value=1>rtos</Option>
            <Option value=2>android</Option>
          </Select>
        </FormItem>
        <FormItem label="软件版本" prop="rom_version">
          <Select v-model="formDynamic.rom_version" placeholder="请选择音箱的应用版本">
            <Option value=0>老架构版本</Option>
            <Option value=1>长连接版本</Option>
          </Select>
        </FormItem>
        <FormItem
            v-for="(item, index) in formDynamic.items"
            v-if="item.status"
            :key="index"
            :label="'用例模块-' + item.index"
            :prop="'items.' + index + '.value'"
            :rules="{required: true, message: '请输入正确的用例模块', trigger: 'blur'}">
          <Row>
            <Col span="18">
              <Input type="text" v-model="item.value" placeholder="添加一个用例模块"></Input>
            </Col>
            <Col span="4" offset="1">
              <Button @click="handleRemove(index)">删除</Button>
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Row>
            <Col span="12">
              <Button type="dashed" long @click="handleAdd" icon="md-add">添加</Button>
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Row>
            <Col flex="auto"></Col>
            <Col flex="140px">
              <Button @click="handleReset('formDynamic')" style="margin-left: 8px">重置</Button>
              <Button type="primary" @click="handleSubmit('formDynamic')">提交</Button>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "ServiceMonitor",
  data() {
    return {
      product_list: [],
      addModal: false,
      paramsModal: false,
      index: 1,
      params: {
        'id': 0,
        'url': '',
        'product_secret': '',
        'productId': '',
        'osClientId': ''
      },
      formDynamic: {
        name: '',
        rom_version: 0,
        system_version: 0,
        items: [
          {
            value: '',
            index: 1,
            status: 1
          }
        ]
      },
      ruleValidate: {
        name: [
          { required: true, message: '请填写正确的产品名称', trigger: 'blur' }
        ],
        rom_version: [
          { required: true, message: '请选择音箱底层的系统版本', trigger: 'change' }
        ],
        system_version: [
          { required: true, message: '请选择音箱应用层的系统版本', trigger: 'change' }
        ],
      }
    }
  },
  mounted() {
    this.$getRequest('/task/info/').then(response=>{
      if (response) {
        this.product_list = response.data
      }
    }).catch(error=>{
      console.log(error)
    })
  },
  methods: {
    testAll(){
      console.log('1111111111111111111111111111')
    },
    onClickAddProduct(){
      this.handleReset('formDynamic')
      this.addModal = true
    },
    checkSystemVersion(version){
      let info = ''
      switch (version) {
        case 0:
          info = 'Linux'
          break;
        case 1:
          info = 'RTOS'
          break;
        case 2:
          info = 'Android'
          break;
        default:
          info = '未知系统'
      }
      return info
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          //  添加产品
          let data = {}
          data["speaker_name"] = this.formDynamic.name
          data["rom_version"] = this.formDynamic.rom_version
          data["system_version"] = this.formDynamic.system_version
          let modules = []
          this.formDynamic.items.forEach(item=>{
            modules.push(item.value)
          })
          data["modules"] = modules
          this.$postRequest('/speakerProduct/add/', data).then(response=>{
            if (response.status === 200){
              this.addModal = false
              this.$Message.success('添加成功！')
              location.reload()
            }
          }).catch(error=>{
            console.log(error)
          })
        } else {
          this.$Message.error('校验失败，请检查！');
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    },
    handleAdd () {
      this.index++;
      this.formDynamic.items.push({
        value: '',
        index: this.index,
        status: 1
      });
    },
    handleRemove (index) {
      this.formDynamic.items[index].status = 0;
    },
    onClickParams(data){
      this.paramsModal = true
      if (this.isNull(data) === '暂无'){
        this.params = {
          'id': 0,
          'url': '',
          'product_secret': '',
          'productId': '',
          'osClientId': ''
        }
        return
      }
      this.params = data
    },
    isNull(data){
      return (data === "" || data === undefined || data === null) ? "暂无" : data;
    },
    updateParams(){
      console.log('点击了按钮')
    }
  }
}
</script>

<style scoped>
.card{
  min-height: 222px;
  /*min-width: 300px;*/
  max-height: 222px;
  margin-bottom: 20px;
}

.badge{
  float: right;
  margin-right: -15px;
  margin-top: -18px;
  display: none
}

.card:hover .badge{
  display: block;
}

.add_card{
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_title{
  font-size: 16px;
  color: #88898A;
}
</style>